<template>
  <div>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="id"
          label="id"
          width="150">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="120">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="del(scope.row)"type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="total"
        @current-change="pageChange">
    </el-pagination>
  </div>
</template>

<script>
export default {
  methods: {
    del(row) {
      axios.delete("/lock/delete/" + row.id).then( resp => {
        if (resp.status == 200) {
          this.$message.success("删除成功")
          this.findByPageNo(1)
        }
      })
    },
    edit(row) {
      console.log(row);
    },
    pageChange(currentPage) {
      this.findByPageNo(currentPage)
    },
    findByPageNo(pageNo) {
      const _this = this
      axios.get("/lock/findAll/" + pageNo + "/2").then( resp => {
        console.log(resp.data)
        _this.tableData = resp.data.content
        _this.total = resp.data.totalElements
      });
    }
  },
  created() {
    this.findByPageNo(1)
  },
  data() {
    return {
      tableData: [{
        id: '1',
        name: '王小虎'
      }, {
        id: '2',
        name: '王小虎'
      }, {
        id: '3',
        name: '王小虎'
      }, {
        id: '4',
        name: '王小虎'
      }],
      total: null,
      pageSize: 2,
    }
  }
}
</script>